<template>
    <div class="setSearchHead">
        <div v-for="(item,index) in data.options.searchForm" :key="index">
            <el-form-item label="搜索属性" v-if="item.type=='input'">
                <el-input class="mb5" placeholder="请输入搜索提示" v-model="item.placeholder"></el-input>
                <el-input class="mb5" placeholder="请输入搜索的属性" v-model="item.value"></el-input>
            </el-form-item>
            <el-form-item label="添加选项" v-if="item.type=='select'">
                <el-input class="mb5" placeholder="请输入搜索提示" v-model="item.placeholder"></el-input>
                <el-input class="mb5" placeholder="请输入搜索的属性" v-model="item.value"></el-input>
                <div class="optionItem mb5" v-for="(select,i) in item.options" :key="i">
                    <el-button type="text" class="del-btn" icon="el-icon-remove-outline" @click="delSelectItemClick(index,i)"></el-button>
                    <el-input class="mb5" placeholder="请输入label" v-model="select.label">
                        <template slot="prepend">label</template>
                    </el-input>
                    <el-input class="mb5" placeholder="请输入value" v-model="select.value">
                        <template slot="prepend">value</template>
                    </el-input>
                </div>
                <el-button type="text" icon="el-icon-plus" size="mini" @click="editSelectItemClick(index)">添加选项</el-button>
            </el-form-item>
            <el-form-item label="添加选项" v-if="item.type=='radio'">
                <el-input class="mb5" placeholder="请输入搜索提示" v-model="item.placeholder"></el-input>
                <el-input class="mb5" placeholder="请输入搜索的属性" v-model="item.value"></el-input>
                <div class="optionItem mb5" v-for="(select,i) in radioData" :key="i">
                    <el-button type="text" class="del-btn" icon="el-icon-remove-outline" @click="delSelectItemClick(index,i)"></el-button>
                    <el-input class="mb5" placeholder="请输入label" v-model="select.label">
                        <template slot="prepend">label</template>
                    </el-input>
                    <el-input class="mb5" placeholder="请输入value" v-model="select.value">
                        <template slot="prepend">value</template>
                    </el-input>
                </div>
                <el-button type="text" icon="el-icon-plus" size="mini" @click="editSelectItemClick(index)">添加选项</el-button>
            </el-form-item>
        </div>
        <el-form-item label="搜索组件">
            <el-button icon="el-icon-plus" size="mini" @click="addClick">搜索条件</el-button>
        </el-form-item>
        <el-form-item label="搜索类型" v-if="isShow">
            <el-radio-group v-model="searchType" @change="searchTypeChange">
                <el-radio label="input">搜索框</el-radio>
                <el-radio label="select">选择器</el-radio>
                <el-radio label="radio">单选框</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="搜索属性" v-if="searchType=='input'">
            <el-input class="mb5" placeholder="请输入搜索提示" v-model="searchPlaceHolder"></el-input>
            <el-input class="mb5" placeholder="请输入搜索的属性" v-model="searchInput"></el-input>
            <el-button size="mini" @click="submitSearchInput">确定</el-button>
        </el-form-item>
        <el-form-item label="添加选项" v-if="searchType=='select'">
            <el-input class="mb5" placeholder="请输入搜索提示" v-model="searchPlaceHolder"></el-input>
            <el-input class="mb5" placeholder="请输入搜索的属性" v-model="searchInput"></el-input>
            <div class="mb5" v-for="(select,i) in selectData" :key="i">
                <el-input class="mb5" placeholder="请输入label" v-model="select.label">
                    <template slot="prepend">label</template>
                </el-input>
                <el-input class="mb5" placeholder="请输入value" v-model="select.value">
                    <template slot="prepend">value</template>
                </el-input>
            </div>
            <el-button type="text" icon="el-icon-plus" size="mini" @click="addSelectItemClick">添加选项</el-button>
            <el-button size="mini" @click="submitSearchInput">确定</el-button>
        </el-form-item>
        <el-form-item label="添加选项" v-if="searchType=='radio'">
            <el-input class="mb5" placeholder="请输入搜索提示" v-model="searchPlaceHolder"></el-input>
            <el-input class="mb5" placeholder="请输入搜索的属性" v-model="searchInput"></el-input>
            <div class="mb5" v-for="(select,i) in radioData" :key="i">
                <el-input class="mb5" placeholder="请输入label" v-model="select.label">
                    <template slot="prepend">label</template>
                </el-input>
                <el-input class="mb5" placeholder="请输入value" v-model="select.value">
                    <template slot="prepend">value</template>
                </el-input>
            </div>
            <el-button type="text" icon="el-icon-plus" size="mini" @click="addRadioItemClick">添加选项</el-button>
            <el-button size="mini" @click="submitSearchInput">确定</el-button>
        </el-form-item>
    </div>
</template>
<script>
export default {
    name: 'SetSearchHead',
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        }
    },
    data(){
        return {
            isShow: false,
            searchType: '',
            selectData: [],
            radioData: [],
            searchInput:'',
            searchPlaceHolder: ''
        }
    },
    methods: {
        addClick(){
            this.isShow = true
        },
        searchTypeChange(){

        },
        addSelectItemClick(){
            this.selectData.push({
                label: '',
                value: ''
            })
        },
        addRadioItemClick(){
            this.radioData.push({
                label: '',
                value: ''
            })
        },
        submitSearchInput(){
            if(this.searchType=='input') {
                this.data.options.searchForm.push({
                    type: 'input',
                    placeholder: this.searchPlaceHolder,
                    value: this.searchInput,
                    search: ''
                })
            } else if(this.searchType=='select') {
                this.data.options.searchForm.push({
                    type: 'select',
                    placeholder: this.searchPlaceHolder,
                    value: this.searchInput,
                    options: this.selectData,
                    search: '',
                })
                this.selectData = []
            } else if(this.searchType=='radio') {
                this.data.options.searchForm.push({
                    type: 'radio',
                    placeholder: this.searchPlaceHolder,
                    value: this.searchInput,
                    options: this.radioData,
                    search: '',
                })
                this.radioData = []
            }
            
            this.searchPlaceHolder = ''
            this.searchInput = ''
        },
        editSelectItemClick(index) {
            this.data.options.searchForm[index].options.push({
                label: '',
                value: ''
            })
        },
        delSelectItemClick(index,i) {
            this.data.options.searchForm[index].options.splice(i,1)
        }
    }
}
</script>
<style lang="scss" scoped>
    .setSearchHead{
        .mb5{
            margin-bottom: 10px;
        }
        .optionItem{
            position: relative;
            .del-btn{
                position: absolute;
                left: -40px;
                top: 0;
                font-size: 20px;
            }
        }
    }
</style>
